import { getSignInRecord } from '@/services/user';
import useRequest from '@ahooksjs/use-request';
import { CheckCircleFilled } from '@ant-design/icons';
import { Calendar, Col, message, Row, Select } from 'antd';
import classnames from 'classnames';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { useState } from 'react';

import styles from './index.less';

const Index: React.FC = () => {
  const [signInRecord, setSignInRecord] = useState<USER.SignInRecordT[]>([]);
  useRequest(getSignInRecord, {
    onSuccess: (res) => {
      console.log(res);
      const { code, data, message: msg } = res;
      if (code === 200) {
        setSignInRecord(data);
      } else {
        message.error(msg);
      }
    },
  });

  const dateCellRender = (value: any) => {
    const nowDate = dayjs().format('YYYY-MM-DD');
    const flag = signInRecord.some((item) => {
      return item.signInDate === value.format('YYYY-MM-DD');
    });
    // 如果是今天
    const isNowDate = nowDate === value.format('YYYY-MM-DD');
    return (
      <ul className={styles.events}>
        <li className={classnames(styles.item, flag || isNowDate ? styles.activateItem : null)}>
          {flag ? (
            <CheckCircleFilled
              style={{ color: 'var(--ant-primary-color)' }}
              className={styles.icon}
            />
          ) : null}
          <span className={styles.dayText}>{value.date()}</span>
          <div className={styles.award}>{!flag && isNowDate ? '今天' : '+456'}</div>
        </li>
      </ul>
    );
  };

  return (
    <div className={styles.customCalendarWrapper}>
      <Calendar
        dateFullCellRender={dateCellRender}
        headerRender={({ value, onChange }) => {
          const start = 0;
          const end = new Date().getMonth() + 1;
          const monthOptions = [];
          const months = [];
          for (let i = 0; i < 12; i++) {
            months.push(`${i + 1}月`);
          }

          for (let i = start; i < end; i++) {
            monthOptions.push(
              <Select.Option key={i} value={i} className="month-item">
                {months[i]}
              </Select.Option>,
            );
          }

          const year = value.year();
          const yearRange = new Date().getFullYear();
          const month = value.month();
          const options = [];
          for (let i = yearRange - 10; i < yearRange + 1; i += 1) {
            options.push(
              <Select.Option key={i} value={i} className="year-item">
                {i}
              </Select.Option>,
            );
          }
          return (
            <div style={{ padding: 8 }}>
              <Row justify="end">
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    className="my-year-select"
                    value={year}
                    onChange={(newYear) => {
                      const now = value.clone().year(newYear);
                      onChange(now);
                    }}
                  >
                    {options}
                  </Select>
                </Col>
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    value={month}
                    onChange={(newMonth) => {
                      const now = value.clone().month(newMonth);
                      onChange(now);
                    }}
                  >
                    {monthOptions}
                  </Select>
                </Col>
              </Row>
            </div>
          );
        }}
      />
    </div>
  );
};

export default Index;
